<template>
	<view class="project-docs-page">
		<!-- 顶部搜索栏（吸顶） -->
		<u-sticky>
			<view class="search-bar">
				<u-search :showAction="true" actionText="搜索" :animation="true" v-model="query.name"
					placeholder="请输入资料名称" @custom="getRightList(false)" @search="getRightList(false)" @clear="getRightList(false)"
					borderRadius="16rpx"></u-search>
			</view>
		</u-sticky>

		<!-- 左右结构容器 -->
		<view class="container">
			<!-- 左侧分类列表（固定宽度） -->
			<view class="category-sidebar">
				<view class="category-item" v-for="(item, index) in categories" :key="index" @click="handleLeft(item)"
					:class="{active: activeCategory === item.id}">
					{{item.name}}
				</view>
			</view>

			<!-- 右侧资料内容区（自适应宽度） -->
			<view class="docs-content">
				<!-- 资料文件列表 -->
				<view class="docs-list">
					<view class="doc-item" v-for="(doc, index) in docs" :key="index" @click="handleViewDoc(doc)">
						<view class="doc-icon">
							<uni-icons :type="getDocIcon(doc.fileName)" size="40" color="#409EFF"></uni-icons>
						</view>
						<view class="doc-info">
							<text class="doc-name">{{doc.fileName}}</text>
							<view class="doc-meta">
								<text class="doc-size">{{formatFileSize(doc.fileSize)}}</text>
								<text class="doc-time">{{doc.createTime}}</text>
							</view>
						</view>
						<uni-icons type="right" size="24" color="#999" class="arrow-icon"></uni-icons>
					</view>
					
			
					<!-- 空状态 -->
					<view class="empty-state" v-if="docs.length === 0 && !loading">
						<uni-icons type="document" size="60" color="#ccc"></uni-icons>
						<text class="empty-text">暂无相关资料文件</text>
					</view>

					<!-- 加载中状态 -->
					<view class="loading-state" v-if="loading && docs.length > 0">
						<uni-icons type="loading" size="30" color="#409EFF" class="loading-icon"></uni-icons>
						<text class="loading-text">加载中...</text>
					</view>

					<!-- 没有更多数据 -->
					<view class="no-more-state" v-if="!loading && docs.length > 0 && docs.length >= total">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProjectCategory,
		getProjectFileList
	} from "@/common/api.js"
	import config from '@/common/config.js'

	export default {
		data() {
			return {
				query: {
					__page: 1,
					__limit: 10,
					name: '',
				},
				loading: false,
				projectId: '',
				categories: [],
				activeCategory: "0",
				docs: [],
				total: 0 ,// 总数据条数
				baseUrl: config.baseUrl,
			}
		},
		onLoad(e) {
			this.projectId = e.projectId || ''
			this.getLeftList()
			this.getRightList()
		},
		// 触底加载
		onReachBottom() {
			console.log(111)
			// 正在加载中、已经没有更多数据时，不执行加载
			if (this.loading || this.docs.length >= this.total) {
				return
			}
			this.getRightList(true) // 加载下一页
		},
		methods: {
			handleLeft(item) {
				this.activeCategory = item.id
				this.getRightList(false) // 切换分类时重新加载第一页
			},
			async getLeftList() {
				let res = await getProjectCategory({
					projectId: this.projectId
				})
				if (res.code == '00000' && res.data) {
					// 统一在分类列表最前面添加"全部"选项
					this.categories = [ ...res.data]
				}
			},
			async getRightList(isRefresh = false) {
				this.loading = true
				if (isRefresh) {
					this.query.__page++ // 加载下一页
				} else {
					this.query.__page = 1 // 重新加载第一页
					this.docs = [] // 清空原有数据
				}
				try {
					let res = await getProjectFileList({
						...this.query,
						projectId: this.projectId,
						categoryId: this.activeCategory
					})
					if (res && res.code == '00000' && res.data) {
						this.total = res.data.totalCount || 0
						if (isRefresh) {
							this.docs = this.docs.concat(...res.data.list) // 追加数据
						} else {
							this.docs = res.data.list || [] // 替换数据
						}
					}
				} catch (error) {
					console.error('获取文件列表失败：', error)
					// 加载失败时，恢复页码（仅下一页加载时）
					if (isRefresh) {
						this.query.__page--
					}
				} finally {
					this.loading = false
				}
			},
			// 根据文件名后缀判断文件类型并返回对应图标
			getDocIcon(fileName) {
				// 获取文件后缀（转为小写）
				const ext = fileName.split('.').pop()?.toLowerCase()
				if (!ext) return 'file' // 无后缀默认文件图标

				// 图标映射表（覆盖常见文件类型）
				const iconMap = {
					// 文档类
					pdf: 'document',
					doc: 'file-text',
					docx: 'file-text',
					txt: 'file-text',
					// 表格类
					xls: 'chart',
					xlsx: 'chart',
					// 图片类
					jpg: 'image',
					jpeg: 'image',
					png: 'image',
					gif: 'image',
					bmp: 'image',
					// 图纸/设计类
					dwg: 'map',
					dxf: 'map',
					// 压缩包
					zip: 'archive',
					rar: 'archive',
					'7z': 'archive',
					// 视频类
					mp4: 'video',
					avi: 'video',
					mov: 'video',
					// 音频类
					mp3: 'music',
					wav: 'music'
				}

				return iconMap[ext] || 'file' // 未匹配到的类型用默认文件图标
			},
			// 格式化文件大小（字节转MB/KB）
			formatFileSize(bytes) {
				if (!bytes) return '0B'
				const kb = bytes / 1024
				if (kb < 1024) {
					return `${kb.toFixed(1)}KB`
				} else {
					const mb = kb / 1024
					return `${mb.toFixed(1)}MB`
				}
			},
			// 查看文件
			handleViewDoc(doc) {
				
				this.$commonFn.downloadFile(config.baseFileUrl + doc.fileId, doc.fileName)
				return
				// 实际项目中根据文件类型处理预览逻辑
				uni.showToast({
					title: `查看${doc.fileName}`, 
					icon: 'none'
				})
				// 示例：如果是图片可以直接预览
				const ext = doc.fileName.split('.').pop()?.toLowerCase()
				const imgExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
				if (imgExts.includes(ext)) {
					uni.previewImage({
						urls: [doc.url]
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 页面基础样式 */
	page {
		background-color: #f5f7fa;
		height: 100%;
	}

	/* 搜索栏样式 */
	.search-bar {
		padding: 16rpx 32rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 左右结构容器 */
	.container {
		display: flex;
		/* height: calc(100vh - 100rpx - 44px); */
	}

	/* 左侧分类边栏 */
	.category-sidebar {
		width: 200rpx;
		background-color: #f5f5f5;
		overflow-y: auto;
		height: calc(100vh - 100rpx - 44px);
	}

	.category-item {
		padding: 25rpx 15rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		border-left: 6rpx solid transparent;
		border-bottom: 1rpx solid #eee;
	}

	.category-item.active {
		background-color: #fff;
		color: #409EFF;
		border-left-color: #409EFF;
		font-weight: 500;
	}

	/* 右侧资料内容区 */
	.docs-content {
		flex: 1;
		/* overflow-y: auto; */
		
	}

	/* 资料列表区域 */
	.docs-list {
		padding: 20rpx 30rpx;
	}

	/* 资料文件项 */
	.doc-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx 25rpx;
		margin-bottom: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.doc-icon {
		margin-right: 20rpx;
	}

	.doc-info {
		flex: 1;
	}

	.doc-name {
		font-size: 30rpx;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.doc-meta {
		display: flex;
		align-items: center;
		margin-top: 8rpx;
		font-size: 24rpx;
		color: #999;
	}

	.doc-size {
		margin-right: 15rpx;
	}

	.arrow-icon {
		opacity: 0.5;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	/* 加载中状态 */
	.loading-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #409EFF;
	}

	.loading-icon {
		animation: spin 1s linear infinite;
		margin-right: 10rpx;
	}

	.loading-text {
		font-size: 26rpx;
	}

	/* 没有更多数据 */
	.no-more-state {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		color: #999;
	}

	.no-more-text {
		font-size: 26rpx;
	}

	/* 加载动画 */
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>